<template>
	<!-- 必须通过if触发计算属性，解决waterfall的数据缓存 -->
	<view class="wrap" v-if="show">
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{leftList}">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<u-lazy-load threshold="-50" border-radius="10" :image="item.defaultPhoto" :index="index"></u-lazy-load>
					<view class="demo-title">
						<view class="title">{{item.photoTitle}}</view>
					</view>
					<view class="like-container">
						<view class="avatar-container">
							<u-lazy-load class="avatar" threshold="-50" border-radius="20" :image="item.header"
								:index="index"></u-lazy-load>
							<view class="username-container">{{item.username}}</view>
						</view>
						<view class="like-count">
							<img src="static/img/tabbar/guanzhu.png" alt="图片加载失败" class="like-image" />
							<view>{{item.likeCount}}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:right="{rightList}">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
					<u-lazy-load threshold="-50" border-radius="10" :image="item.defaultPhoto" :index="index"></u-lazy-load>
					<view class="demo-title">
						<view class="title">{{item.photoTitle}}</view>
					</view>
					<view class="like-container">
						<view class="avatar-container">
							<u-lazy-load class="avatar" threshold="-50" border-radius="20" :image="item.header"
								:index="index"></u-lazy-load>
							<view class="username-container">{{item.username}}</view>
						</view>
						<view class="like-count">
							<img src="static/img/tabbar/guanzhu.png" alt="图片加载失败" class="like-image" />
							<view>{{item.likeCount}}</view>
						</view>
					</view>
				</view>
			</template>
		</u-waterfall>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"
			icon-type="flower"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				loadStatus: "loadmore",
				flowList: [],
				
			};
		},
		props: {
			isFirst: {
				default: true,
				typeof: Boolean
			},
			// 第一次加载默认为第一次刷新
			isrefresh: {
				default: 1,
				typeof: Number
			},
			//底部刷新次数，分页数据
			isreachBottom: {
				default: 0,
				typeof: Number
			},
			// 数据源
			list:{
				default:[],
				typeof:Array
			}
		},
		created(){
		},
		methods: {
			refresh(){
				this.show = false;
				setTimeout(() => {
					this.flowList = [];
					this.addRandomData();
					this.show = true;
				}, 0);
			},
			addRandomData() {
				this.list.forEach(item=>{
					this.flowList.push(item);
				})
			},
			reachBottom() {
				if (this.flowList.length > 30) {
					this.loadStatus = "nomore";
					return;
				}
				this.loadStatus = "loading";
				setTimeout(() => {
					this.addRandomData();
					this.loadStatus = "loadmore";
					this.loading = false;
				}, 2000);
			}

		},
		watch: {
			isreachBottom(newValue, oldValue) {
				console.log('到底了,第'+newValue+'次到底');
				this.reachBottom()
			},
			isrefresh(newV,oldV){
				console.log('刷新了,第'+newV+'次刷新');
				this.refresh()
			}
		}
	};
</script>

<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
	}

	.demo-image {
		width: 100%;
		min-height: 150rpx;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;

		.title {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}

	.avatar-container {
		width: 60%;

		.avatar {
			width: 50%;
		}

		.username-container {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 12px;
		}
	}

	.like-container {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.like-count {
		width: 50%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.like-image {
		width: 40%;
		object-fit: contain;
	}
</style>